<template>
  <div class="map-container">
    <div id="cluster-map" ref="mapRef"></div>
    <div class="map-controls">
      <button class="export-btn" @click="handleExport">
        <span class="icon">📷</span>
        导出地图
      </button>
      <button class="control-btn" @click="toggleFullScreen(mapRef)">
        <span class="icon">{{ isFullScreen ? '缩小' : '全屏' }}</span>
      </button>
      <button class="control-btn" @click="rotateMap(map)">
        <span class="icon">🔄</span>
        旋转地图
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { fromLonLat } from 'ol/proj'
import { ClusterMapLayer } from '../utils/ClusterMapLayer'
import { MapExporterToPNG, toggleFullScreen, rotateMap, isFullScreen, watchFullScreen } from '../utils/MapExporter'

const mapRef = ref<HTMLElement | null>(null)
let map: Map | null = null
let clusterLayer: ClusterMapLayer | null = null
let cleanupFullScreenWatch: (() => void) | null = null;

// 生成随机点数据
function generateRandomPoints(count: number) {
  const points = []
  for (let i = 0; i < count; i++) {
    const lon = 113 + Math.random() * 2
    const lat = 22 + Math.random() * 2
    const point = new Feature({
      geometry: new Point(fromLonLat([lon, lat]))
    })
    points.push(point)
  }
  return points
}

// 处理导出
async function handleExport() {
  if (!map) return
  
  try {
    await MapExporterToPNG(map, {
      pixelRatio: 2, // 提高导出图片质量
      filename: `map-export-${new Date().getTime()}.png`
    })
  } catch (error) {
    console.error('导出地图失败:', error)
  }
}

onMounted(() => {
  if (!mapRef.value) return

  // 创建地图
  map = new Map({
    target: mapRef.value,
    layers: [
      new TileLayer({
        source: new XYZ({
          url: 'https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
          crossOrigin: 'anonymous'
        })
      })
    ],
    view: new View({
      center: fromLonLat([114.1, 24.2]),
      zoom: 8
    })
  })

  // 创建聚类图层
  if (map) {
    clusterLayer = new ClusterMapLayer({
      map,
      features: generateRandomPoints(100),
      clusterDistance: 40,
      enableZoom: true
    });

    // 监听全屏状态变化
    cleanupFullScreenWatch = watchFullScreen(mapRef.value);
  }
})

onUnmounted(() => {
  if (clusterLayer) {
    clusterLayer.destroy()
  }
  if (map) {
    map.setTarget(undefined)
  }
  if (cleanupFullScreenWatch) {
    cleanupFullScreenWatch();
  }
})
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  background: #111;
  position: relative;
}

#cluster-map {
  width: 100%;
  height: 100%;
}

.map-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex; /* 使用 Flexbox 布局按钮 */
  gap: 10px; /* 按钮之间的间距 */
}

.export-btn,
.control-btn {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.export-btn:hover,
.control-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.export-btn .icon,
.control-btn .icon {
  font-size: 16px;
}
</style>

<script lang="ts">
export default {
  name: 'ClusterMap'
}
</script> 